<template>
  <!--车辆使用申请单-->
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息">
            <a-row :gutter="48">
              <a-col :span="8">
                <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="documentNo">
                  <a-input v-model="model.documentNo" placeholder="请输入单据编号" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="handlerId">
                  <select-user-by-dep
                    :multi="false"
                    v-model="model.handlerId"
                    disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <a-input
                    v-model="model.createTime"
                    :show-time="true"
                    date-format="YYYY-MM-DD HH:mm"
                    placeholder="请输入申请时间"
                    disabled ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyDept">
                  <j-select-depart placeholder="请选择申请部门" disabled v-model="model.applyDept"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carAdmin">
                  <select-user-by-dep placeholder="请选择车辆管理员" :multi="false" v-model="model.carAdmin" disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="费用所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="businessUnit">
                  <select-team-input
                    :disabled="formDisabled"
                    v-model="model.businessUnit"
                    :tdlx="3" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请车辆" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carId">
                  <div id="carId">
                    <a-tooltip>
                      <template slot="title">
                        查看汽车详情
                      </template>
                      <a @click="getCarInfo()">{{ model.carId_dictText }}</a>
                    </a-tooltip>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="关联项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
                  <a-input
                    v-if="formDisabled"
                    readOnly
                    @click.prevent="onDetail(model.projectId)"
                    v-model="model.projectId_dictText"
                    style="color: #1890FF; cursor: pointer;"
                    placeholder="请选择项目"></a-input>
                  <select-project-input
                    v-else
                    v-model="model.projectId"
                    placeholder="请选择项目"
                    :projectStatus="'2'"
                    :proDisabled="true"
                    :disabled="formDisabled" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否需要驾驶员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isDriver">
                  <j-dict-select-tag :disabled="formDisabled" type="list" v-model="model.isDriver" dictCode="YES_OR_NO" placeholder="请选择是否需要驾驶员" />
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
              <a-form-model-item label="用车日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="usingStartTime">
                <j-date :disabled="formDisabled" placeholder="请选择用车日期" v-model="model.usingStartTime" style="width: 100%" />
              </a-form-model-item>
            </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="预计归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="usingEndTime">
                  <j-date :disabled="formDisabled" placeholder="请选择预计归还日期" v-model="model.usingEndTime" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="用车类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="usingType">
                  <j-dict-select-tag :disabled="formDisabled" type="list" v-model="model.usingType" dictCode="using_type" placeholder="请选择用车类型" />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item v-if="formBpm" label="预定日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reserveStartTime">
                  <a-date-picker
                    :disabled="formDisabled"
                    placeholder="请选择预定日期始"
                    @change="handleStartChange"
                    :disabled-date="disabledDateStartTime"
                    style="width: 47%"
                    v-model="model.reserveStartTime" />
                  <span class="fontDiy" style="margin-right: 1%;margin-left: 1%;">至</span>
                  <a-date-picker
                    :disabled="formDisabled"
                    :disabled-date="disabledDate"
                    :default-picker-value="model.insuranceStartTime"
                    placeholder="请选择预定日期止"
                    v-model="model.reserveEndTime"
                    style="width: 47%"
                    @change="handleEndChange" />
                </a-form-model-item>
                <a-form-model-item
                  v-else
                  label="预定日期"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="reserveStartTime"
                  style="height:65px">
                  <a-form-model-item :style="{display:'inline-block',width:'48%'}">
                    <a-date-picker
                      :disabled="formDisabled"
                      placeholder="请选择预定日期始"
                      @change="handleStartChange"
                      :disabled-date="disabledDateStartTime"
                      style="width: 100%"
                      v-model="model.reserveStartTime" />
                  </a-form-model-item>
                  <span class="fontDiy" style="margin-right: 1%;margin-left: 1%;">至</span>
                  <a-form-model-item
                    :style="{'margin-top':'0px',display:'inline-block',width:'47%'}"
                    prop="reserveEndTime">
                    <a-date-picker
                      :disabled="formDisabled"
                      :disabled-date="disabledDate"
                      :default-picker-value="model.insuranceStartTime"
                      placeholder="请选择预定日期止"
                      v-model="model.reserveEndTime"
                      style="width: 100%"
                      @change="handleEndChange" />
                  </a-form-model-item>
                </a-form-model-item>
              </a-col>
              <a-col :span="8" v-if="model.isDriver == '1' && formDisabled">
                <a-form-model-item label="驾驶员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="driver">
                  <select-user-by-dep :disabled="formDisabled" placeholder="请输入驾驶员" :multi="false" v-model="model.driver"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否已还车" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isReturnCar" v-if="formDisabled">
                  <j-dict-select-tag type="list" v-model="model.isReturnCar" dictCode="YES_OR_NO" placeholder="请选择是否已还车" disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="还车日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnCarTime" v-if="formDisabled">
                  <j-date placeholder="请选择还车日期" v-model="model.returnCarTime" style="width: 100%" disabled/>
                </a-form-model-item>
              </a-col>
              <!--迭代13 新增字段 只在详情显示-->
              <a-col :span="8" v-if="formDisabled&&!this.formBpm">
                <a-form-model-item label="使用公里数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="kilometers">
                  <a-input-number
                    disabled
                    v-model="model.kilometers"
                    :precision="2"
                    placeholder="请输入使用公里数"
                  /> km
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="事由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subjectMatter">
                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.subjectMatter" rows="4" placeholder="请输入事由"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <!-- 附件信息 -->
          <a-collapse-panel key="2" header="附件信息">
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="附件信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileInfo">
                  <j-upload :disabled="formDisabled" v-model="model.fileInfo" ></j-upload>
                </a-form-model-item>
              </a-col>
              <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                <a-button @click="submitForm">提 交</a-button>
              </a-col> -->
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
      <!-- 流程历史跟踪 -->
      <common-flow-list v-if="model.bpmStatus !== '1' && formDisabled&&!formBpm" :formData="formDataInfo"></common-flow-list>
    </j-form-container>
    <a-row :gutter="48">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary" v-if="formBpm" :style="{ marginRight: showFlowSubmitButton?'10px':'0px' }" v-print="'#carusingContent1'">打印</a-button>
        <a-button @click="submitForm('submit')" v-if="showFlowSubmitButton">提 交</a-button>
      </a-col>
    </a-row>
    <!-- 项目详情开始 -->
    <erp-project-report-modal ref="prejectForm"></erp-project-report-modal>
    <!-- 项目详情结束 -->
    <ErpCarUsingFormPrint
      id="carusingContent1"
      class="print_style"
      :formData="model"
      :formDisabled="formDisabled"
      :formBpm="formBpm"
      :formDataHistory="formDataInfo"></ErpCarUsingFormPrint>
    <div style="text-align: center;margin: 20px 0;padding: 0 0 20px;" v-if="formDisabled&&!formBpm">
      <a-button type="primary" v-print="'#carusingContent1'">打印</a-button>
    </div>
    <erp-car-info-modal ref="modalForm"></erp-car-info-modal>
    <process-config-modal ref="processConfig" @ok="handleOk" @close="handleClose"></process-config-modal>

  </a-spin>
</template>
<style>
#carId {
  width: 100%;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #fafafa;
  opacity: 1;
  margin-top: 3px;
  padding-left: 10px;
  line-height: 34px;
}
</style>
<script>

import { getAction, httpAction } from '@/api/manage'
import moment from 'moment';
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
import { mapGetters } from 'vuex';
import ErpCarInfoModal from '@/views/oa/car/modules/ErpCarInfoModal'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import CommonFlowList from '@/views/components/CommonFlowList.vue' // 审批历史流程列表组件
import ErpProjectReportModal from '@/views/erp/report/project/modules/ErpProjectReportModal'
import ProcessConfigModal from '@/views/scy/components/ProcessConfigModal'
import ErpCarUsingFormPrint from './ErpCarUsingFormPrint'

export default {
  name: 'ErpCarUsingForm',
  components: {
    JSelectDepart,
    SelectUserByDep,
    SelectTeamInput,
    SelectProjectInput,
    ErpCarInfoModal,
    CommonFlowList,
    ErpProjectReportModal,
    ProcessConfigModal,
    ErpCarUsingFormPrint
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  watch: {
    activeKey(key) {
      this.$forceUpdate()
    }
  },
  data () {
    return {
      formDataInfo: {}, // 流程信息
      reserveStartDate: '', // 预定开始日期
      reserveEndDate: '', // 预定结束日期
      add_edit: '',
      activeKey: ['1', '2'],
      model: {
        checkStatus: 0
      },
      labelCol: {
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      confirmLoading: false,
      validatorRules: {
        // applyUser: [
        //     { required: true, message: '请选择申请人!', trigger: 'change'}
        // ],
        // applyUnit: [
        //     { required: true, message: '请选择申请单位!', trigger: 'change'}
        // ],
        // bpmBizTitle:[
        //   { required: true, message: '请输入标题!' }
        // ],
        applyDept: [
          { required: true, message: '请选择申请部门!', trigger: 'change' }
        ],
        usingType: [
          { required: true, message: '请选择用车类型!', trigger: 'blur' }
        ],
        carId: [
          { required: true, message: '请选择申请车辆!', trigger: 'blur' }
        ],
        reserveStartTime: [
          { required: true, message: '请选择预定开始日期!', trigger: 'change' }
        ],
        reserveEndTime: [
          { required: true, message: '请选择预定结束日期!', trigger: 'change' }
        ],
        businessUnit: [
          { required: true, message: '请选择费用所属团队!', trigger: 'change' }
        ],
        // 2022年10月17日18:33:23 关联项目改为非必填
        // projectId: [
        //   { required: true, message: '请选择关联项目!', trigger: 'change'}
        // ],
        isDriver: [
          { required: true, message: '请选择是否需要驾驶员!', trigger: 'blur' }
        ],
        usingStartTime: [
          { required: true, message: '请选择用车日期!', trigger: 'change' }
        ],
        usingEndTime: [
          { required: true, message: '请选择预计归还日期!', trigger: 'change' }
        ],
        subjectMatter: [
          { required: true, message: '请输入事由!', trigger: 'blur' }
        ]
      },
      url: {
        add: '/api/erp/erpcarusing/erpCarUsing/add',
        edit: '/api/erp/erpcarusing/erpCarUsing/edit',
        queryById: '/api/erp/erpcarusing/erpCarUsing/queryById',
        queryProjectReportById: '/api/erp/project/report/erpProjectReport/queryById',
        queryByCarId: '/api/erp/oa/car/erpCarInfo/queryById',
        generatedFormNumber: '/api/erp/base/generatedFormNumber',
        getBizHisProcessNodeInfo: '/api/erpmng/act/process/extActProcessNode/getBizHisProcessNodeInfo',
        checkUsingCar: '/api/erp/erpcarusing/erpCarUsing/checkUsingCar'
      },
      carInfo: {},
      flowCode: 'onl_erp_car_using',
      formUrl: '/oa/erpcarusing/modules/ErpCarUsingForm',
      formUrlMobile: '/pages/synergy/erpCarUsingList',
      processId: '1551852856610439169',
      beanName: 'carUseFlow'
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created () {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowDataById();
  },
  methods: {
    // 生成单号，反写到编号和标题
    generatedFormNumber() {
      getAction(this.url.generatedFormNumber, { prefix: 'YC', subSystemCode: '04' }).then(res => {
        if (res.success) {
          // 单据编号
          this.$set(this.model, 'documentNo', res.result)
          // 标题 申请人-单据编号
          this.$set(this.model, 'bpmBizTitle', this.userInfo().empName + '-' + res.result)
        }
      })
    },
    moment,
    handleStartChange(value, date) {
      this.reserveStartDate = date
      if (this.model.reserveEndTime) {
        if (moment(this.model.reserveEndTime).diff(moment(this.model.reserveStartTime), 'days') < 0) {
          this.model.reserveEndTime = this.model.reserveStartTime
          this.reserveEndDate = this.reserveStartDate
        }
      }
    },
    handleEndChange (value, date) {
      this.reserveEndDate = date
    },
    disabledDate(current) {
      return current < moment(this.model.reserveStartTime).subtract('day')
    },
    disabledDateStartTime(current) {
      return current && current < moment().subtract(1, 'days'); // 当天之前的不可选，不包括当天
    },
    // 关联项目
    selectProject(data) {
      if (data) {
        this.$set(this.model, 'projectId', '');
        this.$set(this.model, 'projectUndertaker', '')
        this.$set(this.model, 'teamId', '')
      }
    },
    ...mapGetters(['userInfo']),
    add (record) {
      this.$refs.form.resetFields();
      if (record) {
        this.model = Object.assign({}, this.modelDefault);
      }
      this.$set(this.model, 'handlerId', this.userInfo().empId) // 申请人
      this.model.applyDept = this.userInfo().deptId
      this.$set(this.model, 'carAdmin', record.carAdmin) // 管理员名称
      this.$set(this.model, 'carAdmin_dictText', record.carAdmin_dictText) // 管理员名称
      if (record.startStr) {
        this.$set(this.model, 'reserveStartTime', record.startStr)
        this.$set(this.model, 'reserveEndTime', record.endStr)
        this.reserveStartDate = record.startStr
        this.reserveEndDate = record.endStr
      }
      if (record.id) {
        this.$set(this.model, 'carId', record.id)
      }
      getAction(this.url.queryByCarId + '?id=' + this.model.carId, {}).then((res) => {
        if (res.success) {
          this.carInfo = res.result;
        }
      });
      if (record.carName) {
        this.$set(this.model, 'carId_dictText', record.carName)
      }
      this.$set(this.model, 'createTime', moment().format('YYYY-MM-DD HH:mm'))
      this.formDisabled = false
      this.add_edit = 'add'
      this.generatedFormNumber();
    },
    async edit (record) {
      this.$refs['form'].clearValidate();
      this.model = Object.assign({}, record);
      await getAction(this.url.queryByCarId + '?id=' + this.model.carId, {}).then((res) => {
        if (res.success) {
          this.carInfo = res.result;
          this.$set(this.model, 'carId_dictText', this.carInfo.carNum)
        }
      });
      // yyyy-MM-dd HH:mm:ss
      this.reserveStartDate = record.reserveStartTime
      this.reserveEndDate = record.reserveEndTime
      this.visible = true;
      this.add_edit = 'edit'
      if (this.model && this.model.bpmStatus !== '1') {
        this.viewTrack()
      }
    },

    // hanyu 查看页面看工作流记录
    viewTrack() {
      let params = { flowCode: this.flowCode, dataId: this.model.id };// 查询条件
      getAction(this.url.getBizHisProcessNodeInfo, params).then((res) => {
        if (res.success) {
          var data = {
            dataId: res.result.dataId,
            procInsId: res.result.procInsId,
            tableName: res.result.tableName,
            vars: res.result.records
          }
          this.formDataInfo = data;
        }
      })
    },

    // 渲染流程表单数据
    showFlowDataById() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId };
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    submitForm (type) {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (this.add_edit == 'add') {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          if (this.reserveEndDate.indexOf('23:59:59') != -1) {
            this.model.reserveEndTime = this.reserveEndDate
          } else {
            this.model.reserveEndTime = this.reserveEndDate + ' ' + '23:59:59'
          }
          if (this.reserveStartDate.indexOf('00:00:00') != -1) {
            this.model.reserveStartTime = this.reserveStartDate
          } else {
            this.model.reserveStartTime = this.reserveStartDate + ' ' + '00:00:00'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok', type, that.model);
            } else {
              that.$message.warning(res.message);
              that.$emit('unButtonDisable');
            }
          }).catch((error) => {
            that.$emit('unButtonDisable', error);
          }).finally(() => {
            that.confirmLoading = false;
          })
        } else {
          that.$emit('unButtonDisable');
        }
      })
    },
    getCarInfo() {
      this.$refs.modalForm.edit(this.carInfo);
      this.$refs.modalForm.title = '详情';
      this.$refs.modalForm.disableSubmit = true;
    },
    backUserInfo(data) {
      this.model.applyUnit = data[0].orgDepart;// 申请人单位
      this.model.applyDept = data[0].departmentId;// 申请人部门
    },
    // 穿透项目底表
    onDetail(id) {
      const that = this
      this.$nextTick(() => {
        getAction(this.url.queryProjectReportById, { id }).then((res) => {
          if (res.success) {
            const model = res.result
            that.$refs.prejectForm.getDetail(model);
            that.$refs.prejectForm.title = '项目一览表';
          }
        })
      })
    },

    saveAndSubmit() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (this.add_edit == 'add') {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          if (this.reserveEndDate.indexOf('23:59:59') != -1) {
            this.model.reserveEndTime = this.reserveEndDate
          } else {
            this.model.reserveEndTime = this.reserveEndDate + ' ' + '23:59:59'
          }
          if (this.reserveStartDate.indexOf('00:00:00') != -1) {
            this.model.reserveStartTime = this.reserveStartDate
          } else {
            this.model.reserveStartTime = this.reserveStartDate + ' ' + '00:00:00'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              // that.$message.success(res.message);
              if (this.add_edit == 'add') {
                that.$set(that.model, 'id', res.result)
              } else {
                that.$set(that.model, 'id', res.result.id)
              }
              // 迭代15 检查是否可发起
              that.checkUsingCar(that.model);
            } else {
              that.$message.warning(res.message);
              that.$emit('unButtonDisable');
            }
          }).catch((error) => {
            that.$emit('unButtonDisable');
          }).finally(() => {
            that.confirmLoading = false;
          })
        } else {
          that.$emit('unButtonDisable');
        }
      })
    },
    // 检查是否可以发起流程
    checkUsingCar(model) {
      let param = {
        carId: model.carId,
        reserveStartTime: model.reserveStartTime,
        reserveEndTime: model.reserveEndTime
      }
      getAction(this.url.checkUsingCar, param).then(res => {
        if (res.result.length > 0) {
          this.$message.warning('该车辆本时段已预约，请选择其他车辆或者其他时段预约');
        } else {
          this.beginProcess(this.model);
        }
      })
    },
    // 发起流程
    beginProcess(record) {
      this.$refs.processConfig.visible = true
      this.$refs.processConfig.formUrl = this.formUrl
      this.$refs.processConfig.formUrlMobile = this.formUrlMobile
      this.$refs.processConfig.flowCode = this.flowCode
      this.$refs.processConfig.edit(record, this.processId, this.beanName)
    },
    handleOk() {
      this.$emit('ok');
    },
    handleClose () {
      this.$emit('close')
    }
  }
}

</script>
<style scoped>
.print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}
</style>
<style>
  @import "../../../../utils/print.css";

</style>
